<template>
	<div class="flex-start-center">
		<div class="total-count-box">
			<div class="margin-right-10">
				<span>订单数量:</span>
				<span class="total-count">{{ formData.totalOrderQty }}</span>
			</div>
			<div class="margin-right-10">
				<span>完工:</span>
				<span class="total-count">{{ formData.totalCompletionQty }}</span>
			</div>
			<div class="margin-right-10">
				<span>未完:</span>
				<span class="total-count">{{ ((formData.totalOrderQty || 0) - (formData.totalCompletionQty || 0)).toFixed(2) }}</span>
			</div>
			<div>
				<span>发货:</span>
				<span class="total-count">{{ formData.totalShipmentsQty }}</span>
			</div>
		</div>
		<el-popover width="1000" trigger="click">
			<span class="total-category-label">客户</span>
			<el-row class="total-category-content">
				<el-col
					v-for="(customerItem, customerIndex) in formData.customerList"
					:key="customerIndex"
					:span="24"
					class="flex-start-center"
				>
					<div style="width: 240px;white-space: nowrap;flex-shrink: 0;">{{ customerIndex + 1 }}、{{ customerItem.customerName }}</div>
					<div style="width: 58px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">订单数量:</div>
					<div style="width: 90px;white-space: nowrap;flex-shrink: 0;">{{ customerItem.orderQty }}</div>
					<div style="width: 58px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">完工数量:</div>
					<div style="width: 90px;white-space: nowrap;flex-shrink: 0;">{{ customerItem.completionQty }}</div>
					<div style="width: 62px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">未完数量:</div>
					<div style="width: 90px;white-space: nowrap;flex-shrink: 0;">{{ ((customerItem.orderQty || 0) - (customerItem.completionQty || 0)).toFixed(2) }}</div>
					<div style="width: 58px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">发货数量:</div>
					<div style="width: 90px;white-space: nowrap;flex-shrink: 0;">{{ customerItem.shipmentsQty }}</div>
				</el-col>
			</el-row>
			<span class="total-category-label">品种</span>
			<el-row class="total-category-content">
				<el-col
					v-for="(productItem, productIndex) in formData.productList"
					:key="productIndex"
					:span="24"
					class="flex-start-center"
				>
					<div style="width: 200px;white-space: nowrap;flex-shrink: 0;">{{ productIndex + 1 }}、{{ productItem.productName }}</div>
					<div style="width: 42px;font-weight: 300;white-space: nowrap;flex-shrink: 0;">批号:</div>
					<div style="white-space: nowrap;flex-shrink: 0;width: 160px">{{ productItem.batchCode }}</div>
					<div style="width: 58px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">订单数量:</div>
					<div style="width: 80px;white-space: nowrap;flex-shrink: 0;">{{ productItem.orderQty }}</div>
					<div style="width: 58px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">完工数量:</div>
					<div style="width: 80px;white-space: nowrap;flex-shrink: 0;">{{ productItem.completionQty }}</div>
					<div style="width: 62px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">未完数量:</div>
					<div style="width: 80px;white-space: nowrap;flex-shrink: 0;">{{ ((productItem.orderQty || 0) - (productItem.completionQty || 0)).toFixed(2) }}</div>
					<div style="width: 58px;white-space: nowrap;font-weight: 300;flex-shrink: 0;">发货数量:</div>
					<div style="width: 80px;white-space: nowrap;flex-shrink: 0;">{{ productItem.shipmentsQty }}</div>
				</el-col>
			</el-row>
			<el-button slot="reference" type="text" icon="el-icon-question"></el-button>
		</el-popover>
	</div>
</template>
<script>
    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
            };
        }
    };
</script>
<style scoped lang="scss">
    .total-count-box {
        margin-right: 10px;
        font-size: 15px;
        display: flex;
        flex-wrap: wrap;
        .total-count {
            font-weight: 500;
            margin-left: 4px;
            font-size: 20px;
        }
    }
    .total-category-label {
        font-size: 13px;
    }
    .total-category-content {
        max-height: 300px;
        overflow: auto;
        border: solid 1px #eee;
        padding: 10px;
        margin-bottom: 10px;
        font-size: 13px;
    }
</style>
